<template lang="html">
  <div class="infocenter">
    <div class="touxiang">
      <img src="../../assets/images/390.png" alt="">
    </div>
    <div class="member">
       <span class="span1">0分钟</span>
       <span span="span2">开通会员</span>
    </div>
    <div class="navContainer">
        <ul class="nav">
          <router-link to="/infocenter/membercenter" tag="li"> <span class="icon icon1"></span>会员中心<span class="arrow"></span> </router-link>
          <li> <span class="icon icon2"></span>消息中心<span class="arrow"></span> </li>
          <li> <span class="icon icon3"></span>在线听歌免流量<span class="arrow"></span> </li>
          <li> <span class="icon icon4"></span>扫一扫<span class="arrow"></span> </li>
          <router-link to="/infocenter/skincenter" tag="li"> <span  class="icon icon5"></span>个性皮肤<span class="arrow"></span> </router-link>

          <!-- <li> <span class="icon icon5"></span>个性皮肤<span class="arrow"></span> </li> -->
          <li> <span class="icon icon6"></span>听歌识曲<span class="arrow"></span> </li>
          <li> <span class="icon icon7"></span>定时播放<span class="arrow"></span> </li>
          <li> <span class="icon icon8"></span>魔笛铃声<span class="arrow"></span> </li>
          <li> <span class="icon icon9"></span>锁频歌词<span class="switch"></span> </li>
          <li> <span class="icon icon10"></span>桌面歌词<span class="switch"></span> </li>
          <li> <span class="icon icon11"></span>流量提醒<span class="switch2"></span> </li>
        </ul>
    </div>
    <div class="footer">
      <div class="right">
          <div class="set">
             <span></span>设置
          </div>
          <div class="out">
             <span></span>退出
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:"infocenter",
    data(){
      return{

      }
    }
}
</script>

<style scoped>
.infocenter{
  background-color: #fff;
}
.infocenter .touxiang{
  width: .98rem;
  height: .98rem;
  margin: 0 auto ;
  border-radius: 50%;
  padding-top: .5rem;
  padding-bottom:.3rem;
}
.infocenter .touxiang img{
  width: .98rem;
  height: .98rem;
  border-radius: 50%;
}
.infocenter .member{
  width: 100%;
  height:.6rem;
  text-align: center;
  padding-bottom: .7rem;
}
.member span{
    display: inline-block;
    width: 1.5rem;
    height:.6rem;
    border: 1px solid #000;
    box-sizing: border-box;
    padding-top: .17rem ;
    border-radius: .15rem;
}
.infocenter .member .span1{
   border: 1px solid #c995f5;
   margin-right:.64rem;
    color: #632598;
}
.navContainer{
  width: 100%;
}
.navContainer .nav{
  list-style: none;
}
.navContainer .nav li{
  width: 100%;
  height: .75rem;
  box-sizing: border-box;
  border-bottom: 1px solid #cccccc;
  padding: .22rem .12rem .12rem .36rem;
  font-size: 18px;
  color: #333333;
  overflow: hidden;
}
.navContainer .nav .icon {
  display: inline-block;
  width:.45rem;
  height: .45rem;
  vertical-align:middle;
}
.navContainer .nav .icon1{
    background: url(../../assets/images/infoCenter.png);
    background-position:0 0;
    background-size: 6rem;
}

.navContainer .nav .icon2{
    background: url(../../assets/images/infoCenter.png);
    background-position: -0.75rem 0;
    background-size: 6rem;
}
.navContainer .nav .icon3{
    background: url(../../assets/images/infoCenter.png);
    background-position: -1.5rem 0;
    background-size: 6rem;
}
.navContainer .nav .icon4{
    background: url(../../assets/images/infoCenter.png);
    background-position: -2.2rem 0;
    background-size: 6rem;
}
.navContainer .nav .icon5{
    background: url(../../assets/images/infoCenter.png);
    background-position: -2.85rem 0;
    background-size: 6rem;
}
.navContainer .nav .icon6{
    background: url(../../assets/images/infoCenter.png);
    background-position: -3.55rem 0;
    background-size: 6rem;
}
.navContainer .nav .icon7{
    background: url(../../assets/images/infoCenter.png);
    background-position: -4.3rem 0;
    background-size: 6rem;
}
.navContainer .nav .icon8{
    background: url(../../assets/images/infoCenter.png);
    background-position: -5rem 0;
    background-size: 6rem;
}
.navContainer .nav .icon9{
    background: url(../../assets/images/infoCenter.png);
    background-position: -5.65rem 0;
    background-size: 6rem;
}
.navContainer .nav .icon10{
    background: url(../../assets/images/infoCenter.png);
    background-position: -5.99rem -0.57rem;
    background-size: 6rem;
}
.navContainer .nav .icon11{
    background: url(../../assets/images/infoCenter.png);
    background-position: -6.75rem -0.575rem;
    background-size: 6rem;
}
.navContainer .nav .arrow{
    display: inline-block;
    width:.45rem;
    height: .45rem;
    vertical-align:middle;
    float: right;
    margin-right: 0.26rem;
}
.navContainer .nav .arrow{
    background: url(../../assets/images/infoCenter.png);
    background-position: -9rem -0.56rem;
    background-size: 6rem;

}
.navContainer .nav .switch{
    display: inline-block;
    width:.65rem;
    height: .45rem;
    vertical-align:middle;
    float: right;
    margin-right: 0.26rem;
}
.navContainer .nav .switch{
      background: url(/static/img/infoCenter.65c77ac.png);
    background-position: -9.5rem -0.56rem;
    background-size: 6rem;

}
.navContainer .nav .switch2{
    display: inline-block;
    width:.65rem;
    height: .45rem;
    vertical-align:middle;
    float: right;
    margin-right: 0.26rem;
}
.navContainer .nav .switch2{
      background: url(/static/img/infoCenter.65c77ac.png);
      background-position: -10.25rem -0.56rem;
      background-size: 6rem;
}
.footer{
    width: 100%;
    height: 1.15rem;
    overflow: hidden;
    padding-top: 0.67rem;
    box-sizing: border-box;
}
.footer .right{
  width: 2.5rem;
  height: 0.4rem;
  float: right;
  overflow: hidden;
}
.footer div{
  float: left;
}
.footer .set span,.footer .out span{
  display: inline-block;
  width:.45rem;
  height: .45rem;
  vertical-align: middle;
}
.footer .set span{
      background: url(/static/img/infoCenter.65c77ac.png);
      background-position: -13.5rem -0.6rem;
      background-size: 6rem;
      margin-right:.14rem;
}
.footer .out span{
      background: url(/static/img/infoCenter.65c77ac.png);
      background-position: -14.1rem -0.6rem;
      background-size: 6rem;
      margin-right:.14rem;
}
</style>
